<template>
  <div class="searchPage">
      <div class="search"> 
        <search class="home-search" v-model="searchVal" ref="searchPage" placeholder="请输入商品名称"  @change="onInput" sousuo="true"></search>
      </div>
      <div class="records">
        <h1>历史搜索 <span class="float-right" @click="removeFun">清除搜索记录</span> </h1>
        <ul class="ul-list clear-both" v-if="HistoryList.length>0">
          <li class="float-left" v-for="item in HistoryList"  @click="selectItem(item)">{{item}}</li>
        </ul>
        <div class="hit-text text-center" v-else>暂无记录</div>
      </div>
      <div class="text-center footer-text">中国农业银行重庆市分行</div>
  </div>
</template>

<script>
import { Dialog,Toast } from 'vant';
import search from './tpl/search'
export default {
  name: 'searchPage',
  created (){
    
  },
  data () {
    return {
      searchVal:'',
      HistoryList:JSON.parse(localStorage.getItem('HistoryList')) || [],
    }
  },
  methods:{
      onInput (){
        let vm =this;
        if(vm.Trim(vm.searchVal,'g')!=''){
            if(vm.HistoryList.indexOf(vm.Trim(vm.searchVal,'g')) == -1){
              vm.HistoryList.unshift(vm.Trim(vm.searchVal,'g')) ;
              localStorage.setItem('HistoryList',JSON.stringify(vm.HistoryList));
            }
        }
        this.$router.push({name:'ProductList',params:{keyCode:vm.searchVal}})
      },
      //选择历史搜索
      selectItem(item){
        this.$router.push({name:'ProductList',params:{keyCode:item}})
      },
      removeFun (){
        localStorage.removeItem('HistoryList');
        this.HistoryList=[];
      }
  },
  mounted (){
    document.title="搜索商品"
    this.$refs.searchPage.$refs.input.focus();
  },
  components:{
    search
  }
}
</script>


<style  lang="scss">
.searchPage{
    height:100%;
    width:100%;
    background:#fff;
    .search{
      padding:.133333rem 0;
      border-bottom:.013333rem solid #ececec;
    }
    .records{
      padding:.266667rem;
      h1{
        color:#666;
        padding:.266667rem .133333rem;
      }
      .ul-list{
         li{
           padding:.106667rem  .2rem;
           margin:.133333rem;
           border:.013333rem solid #FFFBE6;
           border-radius:.08rem;
           background:#f8f8f8;
           color:#333;
         }
      }
      .hit-text{
        margin-top:.133333rem;
        color:#666;
      }
    }
  .footer-text{
    color:#999;
    width:100%;
    position:fixed;
    bottom:.533333rem;
  }
}
</style>
